<!-- 用户管理 -->
<template>
  <div class="outer">
    <h5>用户管理</h5>
    <div class="main">
      <avue-crud
        :data="userData"
        :option="userOption"
        @row-update="userUpdate"
      ></avue-crud>
    </div>
  </div>
</template>

<script>
import { updateUserList, getUserList } from "@/api/api";

export default {
  components: {},
  props: {},
  data() {
    return {
      userData: [],
      userOption: {
        addBtn: false,
        delBtn: false,
        column: [
          {
            label: "用户名",
            prop: "username",
            display: false,
          },
          {
            label: "手机号",
            prop: "phone",
            display: false,
          },
          {
            label: "状态",
            prop: "status",
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    /**
     * 获取用户列表
     */
    onLoad() {
      getUserList()
        .then((result) => {
          if (result.data.code == 1 && result.data.data) {
            this.userData = result.data.data;
          }
        })
        .catch((err) => {
          this.$message({
            message: "获取用户列表失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },

    /**
     * 编辑用户数据
     * @param {Object} form 表单内容
     * @param {Number} index 表单数据
     * @param {Function} done 执行方法
     * @param {*} loading
     */
    userUpdate(form, index, done, loading) {
      updateUserList({ id: form.id, status: form.status })
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "编辑成功！",
              type: "success",
            });
            this.onLoad();
          }
        })
        .catch((err) => {
          this.$message({
            message: "编辑失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
      done();
    },
  },
  created() {},
  mounted() {
    this.onLoad();
  },
};
</script>
<style lang="scss" scoped>
.outer {
  padding: 20px;

  h5 {
    margin: 20px;
  }
}
</style>